<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <u-sticky>
            <view class="tabs">
                <u-tabs :list="list1" :current="current" :lineColor="color" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :scrollable="false" @click="click"></u-tabs>
            </view>
        </u-sticky>

        <view class="list" v-for="(item, index) in pageData" :key="index">
            <image :src="$imgUrls(item.goods_info.img)" mode="aspectFill" class="Imgs"></image>
            <view class="content">
                <text class="title ellipsis">{{ item.goods_info.name }}</text>
                <text class="color_ff4 size28" v-if="item.order_id > 0">已被抢单</text>
                <text class="color size28" v-else>等待抢单</text>
            </view>
            <view class="goPlay" v-if="state == 1 && item.order_id > 0" @click="Playbtn(item)">去支付</view>
        </view>

        <emptys v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                snatch_type: 2,
                img: 'https://msraimgcdn.mogoie.com/6165/1755744891736.jpg',
                title: '我发布的',
                list1: [
                    {
                        name: '进行中',
                        state: 1
                    },
                    {
                        name: '已结束',
                        state: 2
                    }
                ],
                state: 1,
                current: 0,
                pageData: []
            };
        },
        onLoad(opt) {
            if (opt.snatch_type) this.snatch_type = opt.snatch_type;
            this.mySnatch();
        },
        methods: {
            mySnatch() {
                this.$http
                    .get({
                        url: '/SnatchApi/mySnatch',
                        data: {
                            snatch_type: this.snatch_type,
                            state: this.state
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.pageData = result;
                    });
            },
            Playbtn(item) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/accountPay/cashierStorePageAjax',
                        data: {
                            orderAesStr: item.payID,
                            payType: 1,
                            openId: this.openid
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.Play(result);
                    });
            },
            async Play(data) {
                const result = await this.$pop.getPayment(data);
                if (!result) return;
                const palyResult = await this.$Modals('提示', '支付成功');
                if (!palyResult) return;
                this.state = 2;
                this.current = 1;
                this.mySnatch();
            },
            click(e) {
                this.state = e.state;
                this.current = e.index;
                this.mySnatch();
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight', 'openid']),
            activeStyle() {
                return {
                    color: '#000',
                    fontSize: '34rpx',
                    fontWeight: '500'
                };
            },
            inactiveStyle() {
                return {
                    color: '#333',
                    fontSize: '32rpx'
                };
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 20rpx;
    }
</style>
<style lang="scss" scoped>
    .tabs {
        width: 100%;
        padding: 0 100rpx;
        background-color: $page;
    }
    .list {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        .Imgs {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            height: 120rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
                color: #000;
                font-size: 32rpx;
            }
        }
        .goPlay {
            background-color: var(--color);
            color: #fff;
            font-size: 28rpx;
            padding: 12rpx 24rpx;
            border-radius: 10rpx;
        }
    }
</style>
